<template>
  <ul class="song-list">
       <li
            class="song-item"
            v-for="(song, index) in songs"
            :key="song.id"
            @click="selectSong(index)"
       >
           <div class="song-title">{{song.name}}</div>
           <div class="desc">{{song.singer}}·{{song.album}}</div>
       </li>
  </ul>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { SongProps } from '@/views/song/index.vue'
export default defineComponent({
    props: {
        songs: {
            type: Array as PropType<SongProps[]>,
            default: () => []
        }
    },
    emit: ['select'],
    setup (props, { emit }) {
        const selectSong = (index: number) => {
            emit('select', index)
        }
        return {
            selectSong
        }
    }
})
</script>

<style lang="scss">
.song-list {
    background-color: #222;
    padding-top: 20px;
    .song-item {
        padding: 5px 20px 20px 20px;
        .song-title {
            color: rgba(255, 255, 255, 1);
            margin-bottom: 10px;
        }
        .desc {
             color: rgba(255, 255, 255, .3);
        }
    }
}
</style>
